<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .zc {
            background-color: orange;
            width: 80;
            height: 30px;
        }
        
        .big {
            width: 100%;
            height: 600px;
        }
        
        .left {
            float: left;
            width: 30%;
            height: 600px;
        }
        
        .middle {
            float: left;
            width: 30%;
            margin-left: 20px;
            height: 600px;
        }
        
        .middle ul li {
            list-style: none;
        }
        
        .right {
            float: left;
            width: 30%;
            margin-left: 20px;
            height: 600px;
        }
    </style>
</head>


<body>
    <div class="big">
        <div class="left"><label for="">..</label></div>
        <div class="middle">
            <ul>
                <li><span>用户名</span> <input type="user" class="user"></li>
                <li><span>密码</span> <input type="password" class="pass"></li>
                <li><span>Email</span> <input type="text" class="email"></li>
                <li><span>姓名 </span> <input type="text"></li>
                <li><span>手机号</span> <input type="text"></li>
                <li><span>性别</span><input type="radio">男<input type="radio">女</li>
                <li><span>出生日期</span> <input type="text"></li>
                <li><span>验证码</span> <input type="text"></li>
                <li><button class="zc">注册</button></li>
            </ul>
        </div>
        <div class="right"></div>
    </div>
</body>
<script>
    var user_req = /^[^0-9][a-zA-Z0-9_-]{5,16}$/
    var user = document.querySelector(".user");
    var pass_req = /^[a-zA-Z0-9]{6,16}$/
    var pass = document.querySelector(".pass");
    var email_req = /^w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    var email = document.querySelector(".email");
    var zc = document.querySelector(".zc");
    zc.onclick = function() {
        if (!user_req.test(user.value)) {
            alert("用户名不合法");
            return;
        } else if (!pass_req.test(pass.value)) {
            alert("密码不合法");
            return;
        } else if (!email_req.test(email.value)) {
            alert("邮箱不合法");
            return;
        }
        alert("注册成功")
    }
</script>

</html>